<template>
  <div id="app" v-loading="loading" element-loading-text="拼命计算中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="headerTitle">
      <p class="title">碳足迹计算器</p>
      <p>瑰丽的雪山是人类共同的财富，然后随着不合理的碳排放使得气温升高，一些积雪正在融化，我们为此制作了一个可以计算一些简单的碳排放的计算器。</p>
      <el-button size="small" class="btn" type="primary" @click="check">计算</el-button>
    </div>
    <div class="collapse">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="1.住宅" name="1">
          <el-form label-width="180px">
            <el-form-item label="家庭成员数">
              <el-select v-model="form1.personNum" placeholder="请选择活动区域">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="冬季是否使用暖气">
              <el-radio-group v-model="form1.isuseHot">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="居住面基(平方米)">
              <el-input v-model="form1.area" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="每月用电(度/年)">
              <el-input v-model="form1.d" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="每月用水(吨/年)">
              <el-input v-model="form1.s" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="每月用天然气(立方/年)">
              <el-input v-model="form1.t" placeholder=""></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="2.交通" name="2">
          <el-form label-width="180px">
            <el-form-item label="飞机(千米/年)">
              <el-input v-model="form2.fj" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="火车(千米/年)">
              <el-input v-model="form2.hc" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="公交(千米/年)">
              <el-input v-model="form2.gj" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="地铁(千米/年)">
              <el-input v-model="form2.dt" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="私家车(千米/年)">
              <el-input v-model="form2.sjc" placeholder=""></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="3.生活习惯" name="3">
          <el-form label-width="180px">
            <el-form-item label="消耗快洗数(双/年)">
              <el-input v-model="form3.kz" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="消耗袋子数(个/年)">
              <el-input v-model="form3.dz" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="每年打印纸张数(张/年)">
              <el-input v-model="form3.zz" placeholder=""></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="4.您可以减少co2的好习惯" name="4">
          <el-form label-width="180px">
            <el-form-item label="自行车代步(千米/年)">
              <el-input v-model="form4.zxc" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="新能源汽车(千米/年)">
              <el-input v-model="form4.xny" placeholder=""></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!--计算结果弹窗-->
    <el-dialog title="计算结果" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <p>您一年co2排放量 <span class="resu">{{ res1 }}</span>吨</p>
      <p>全球气温因此每年升高<span class="resu">{{ res3 }}</span>度</p>
      <p>需要<span class="resu">{{ res4 }}</span>棵大树来吸收</p>
      <div ref="main" id="main" style="width:100%;height:400px;">
        <EchartData :chartslist="chartslist"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import  EchartData  from './components/EchartData.vue'
export default {
  name: 'App',
  components:{
    EchartData
  },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      activeNames: ['1'],
      res1: '',
      res2: "",
      res3: '',
      res4: '',
      form1: {
        personNum: '1',
        isuseHot: 1,
        area: '',
        d: '',
        s: '',
        t: ''
      },
      form2: {
        fj: '',
        hc: '',
        gj: '',
        dt: '',
        sjc: "",

      },
      form3: {
        kz: '',
        dz: '',
        zz: ''
      },
      form4: {
        zxc: "",
        xny: ''
      },
      chartslist:[]
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false

    },
    handleChange(data) {
      console.log(data)
    },
    check() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.dialogVisible = true
        var data1 = (Number(this.form1.d) * 1.1) + (Number(this.form1.s) * 7.5) + (Number(this.form1.t) * 1.7)
          + (Number(this.form2.fj) * 0.2) + (Number(this.form2.hc) * 0.041) + (Number(this.form2.dt) * 0.02) + (Number(this.form2.sjc) * 2.3)
          + (Number(this.form3.kz) * 1) + (Number(this.form3.dz) * 0.01) + (Number(this.form3.zz) * 0.026) - (Number(this.form4.zxc) * 0.05) - (Number(this.form4.xny) * 18)
        this.res1 = data1
        this.res3 = data1 / 60000000000
        this.res4 = data1 / 18
        var chartsData = []
        chartsData[0] = {name:'电',value:Number(this.form1.d) * 1.1}
        chartsData[1] = {name:'水',value:Number(this.form1.s) * 7.5}
        chartsData[2] = {name:'天然气',value:Number(this.form1.t) * 1.7}
        chartsData[3] = {name:'飞机',value:Number(this.form2.fj) * 0.2}
        chartsData[4] = {name:'火车',value:Number(this.form2.hc) * 0.041}
        chartsData[5] = {name:'地铁',value:Number(this.form2.dt) * 0.02}
        chartsData[6] = {name:'私家车',value:Number(this.form2.sjc) * 2.3}
        chartsData[7] = {name:'筷子',value:Number(this.form3.kz) * 1}
        chartsData[8] = {name:'塑料袋',value:Number(this.form3.dz) * 0.01}
        chartsData[9] = {name:'纸张',value:Number(this.form3.zz) * 0.026}
        this.chartslist = chartsData
      }, 3000);
    
      //每度电产生1.1kg,每吨水产生7.5kg,每立方天然气产生1.7kg，飞机每1km飞行产生0.2kg，火车每千米产生0.041kg
      //公交车每公里产生1kg,私人轿车每公里 2.3kg,地铁每公里0.02kg,一双筷子1kg，一个袋子0.01kg，一张纸0.026
      //骑自行车每公里减少0.05kg,新能源汽车每公里减少18kg
      //600亿吨排放量上升一度  60000000000
      //一棵树一年吸收18kg
    },
  }

}
</script>

<style>
html {
  width: 100%;
  height: 100%;
  background-image: url('./assets/login.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#app {
  position: relative;
  top: 100px;
}

.headerTitle {
  text-align: center;
  height: 100px;
  color: #ffffff;
  /* line-height: 50px; */
  border: 1px solid #EBEEF5;
  margin-bottom: 5px;
}

.title {
  font-size: 20px;
  font-weight: 600;
}

.btn {
  position: absolute;
  right: 10px;
  top: 33px;
}

.resu {
  color: red;
}

.collapse {
  padding: 20px;
  background-image: url('./assets/math.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
